<!DOCTYPE html>
<html lang="cn">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Glanzz</title>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.2/css/all.css"
      rel="stylesheet" />
    <link
      href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css"
      rel="stylesheet" />
    <link
      href="https://fonts.loli.net/css?family=Noto+SerifMerriweather|Merriweather+Sans|Ubuntu:400,700|Noto+Serif+SC:400,700,900"
      rel="stylesheet" />
    <link
      href="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.css"
      rel="stylesheet" />
    <script>
      console.log(
        '\n' +
          ' %c Glanzz' +
          ' %c https://github.com/CupOfBread/Glanzz ' +
          '\n',
        'color: #f59e0b; background: #030307; padding:5px 0; font-size:15px',
        'background: #f59e0b; padding:5px 0; font-size:15px'
      )
    </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.prod.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-demi/0.13.7/index.iife.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/pinia/2.0.18/pinia.iife.prod.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.1.3/vue-router.global.prod.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/marked/4.0.18/marked.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.6.0/styles/vs2015.min.css"
      rel="stylesheet" />
  </head>
  <body>
    <div id="app">
      <div id="Loading">
        <div class="loader-inner ball-beat">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>

    <style type="text/css">
      #Loading {
        top: 50%;
        left: 50%;
        position: absolute;
        -webkit-transform: translateY(-50%) translateX(-50%);
        transform: translateY(-50%) translateX(-50%);
        z-index: 100;
      }

      @-webkit-keyframes ball-beat {
        50% {
          opacity: 0.2;
          -webkit-transform: scale(0.75);
          transform: scale(0.75);
        }

        100% {
          opacity: 1;
          -webkit-transform: scale(1);
          transform: scale(1);
        }
      }

      @keyframes ball-beat {
        50% {
          opacity: 0.2;
          -webkit-transform: scale(0.75);
          transform: scale(0.75);
        }

        100% {
          opacity: 1;
          -webkit-transform: scale(1);
          transform: scale(1);
        }
      }

      .ball-beat > div {
        background-color: #4999ff;
        width: 10px;
        height: 10px;
        border-radius: 100% !important;
        margin: 2px;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        display: inline-block;
        -webkit-animation: ball-beat 0.7s 0s infinite linear;
        animation: ball-beat 0.7s 0s infinite linear;
      }

      .ball-beat > div:nth-child(2n-1) {
        -webkit-animation-delay: 0.35s !important;
        animation-delay: 0.35s !important;
      }
    </style>

    <script type="module" src="/src/main.ts"></script>
    <div id="aplayer"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
    <meting-js
      server="netease"
      type="playlist"
      id="2499558561"
      fixed="true"
      autoplay="true"
      order="random"
      lrc-type="1">
    </meting-js>
    <script
      charset="UTF-8"
      id="LA_COLLECT"
      src="//sdk.51.la/js-sdk-pro.min.js"></script>
    <script>
      LA.init({
        id: 'JmDVz2f4Yf4LJEPh',
        ck: 'JmDVz2f4Yf4LJEPh',
        autoTrack: true,
        hashMode: true,
      })
    </script>
  </body>
</html>
